<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对定位</title>
    <style>
      body {
        padding: 20px;
        font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
      }

      p {
        margin: 0 0 1em 0;
      }

      .container {
        width: 500px;
        border: 5px solid rgb(111, 41, 97);
        border-radius: 0.5em;
        padding: 10px;

        position: relative;
      }

      .item {
        width: 100px;
        height: 100px;
        background-color: rgba(111, 41, 97, 0.3);

        position: absolute;
        top: 20px;
        left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>
        Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi
        radish okra azuki bean corn fava bean mustard tigernut jícama green bean
        celtuce.
      </p>

      <div class="item"></div>
      <p>
        Grape silver beet collard greens avocado quandong fennel gumbo
        black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra
        pea winter purslane coriander yarrow sweet pepper radish garlic brussels
        sprout groundnut summer purslane earthnut pea tomato spring onion azuki
        bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean
        zucchini gourd winter purslane silver beet rock melon radish asparagus
        spinach.
      </p>
    </div>
  </body>
</html>
